<div class="card mat-elevation-z2">
  <div class="header">
    <p>Notebook Servers</p>

    <div class="spacer"></div>

    <a routerLink="/new">
      <button mat-button id="add-nb" color="accent">
        <mat-icon>add</mat-icon>NEW SERVER
      </button>
    </a>
  </div>

  <mat-divider></mat-divider>

  <table mat-table [dataSource]="dataSource" [trackBy]="trackByFn" matSort>
    <!-- Status Column -->
    <ng-container matColumnDef="status">
      <th mat-header-cell *matHeaderCellDef>Status</th>
      <td mat-cell *matCellDef="let elem">
        <!-- Running -->
        <mat-icon
          *ngIf="elem.status === 'running'"
          [ngClass]="['running', 'status']"
          [matTooltip]="elem.reason"
          >check_circle
        </mat-icon>

        <!-- Warning -->
        <mat-icon
          *ngIf="elem.status === 'warning'"
          [ngClass]="['warning', 'status']"
          [matTooltip]="elem.reason"
          >warning
        </mat-icon>

        <!-- Error -->
        <mat-icon
          *ngIf="elem.status === 'error'"
          [ngClass]="['error', 'status']"
          [matTooltip]="elem.reason"
          >clear
        </mat-icon>

        <!-- Waiting -->
        <mat-spinner
          *ngIf="elem.status === 'waiting'"
          [matTooltip]="elem.reason"
          diameter="24"
          class="inline"
        >
        </mat-spinner>
      </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef>Name</th>
      <td mat-cell *matCellDef="let elem">{{ elem.name }}</td>
    </ng-container>

    <!-- Age Column -->
    <ng-container matColumnDef="age">
      <th mat-header-cell *matHeaderCellDef>Age</th>
      <td mat-cell *matCellDef="let elem">{{ elem.age }}</td>
    </ng-container>

    <!-- Image Column -->
    <ng-container matColumnDef="image">
      <th mat-header-cell *matHeaderCellDef>Image</th>
      <td mat-cell *matCellDef="let elem">
        <span [matTooltip]="elem.image">{{ elem.shortImage }}</span>
      </td>
    </ng-container>

    <!-- CPU Column -->
    <ng-container matColumnDef="cpu">
      <th mat-header-cell *matHeaderCellDef>CPU</th>
      <td mat-cell *matCellDef="let elem">{{ elem.cpu }}</td>
    </ng-container>

    <!-- Memory Column -->
    <ng-container matColumnDef="memory">
      <th mat-header-cell *matHeaderCellDef>Memory</th>
      <td mat-cell *matCellDef="let elem">{{ elem.memory }}</td>
    </ng-container>

    <!-- Volumes Column -->
    <ng-container matColumnDef="volumes">
      <th mat-header-cell *matHeaderCellDef>Volumes</th>
      <td mat-cell *matCellDef="let elem">
        <button mat-icon-button [matMenuTriggerFor]="volsMenu">
          <mat-icon>more_vert</mat-icon>
        </button>
        <mat-menu #volsMenu="matMenu">
          <button mat-menu-item *ngFor="let vol of elem.volumes">
            <mat-icon>storage</mat-icon>
            <span>{{ vol }}</span>
          </button>
        </mat-menu>
      </td>
    </ng-container>

    <!-- Actions Column -->
    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let elem">
        <!-- Connect to Notevook -->
        <button
          (click)="connectResource(elem)"
          mat-button
          color="accent"
          [disabled]="elem.status !== 'running'"
        >
          CONNECT
        </button>

        <button
          mat-icon-button
          [disabled]="elem.reason === 'Deleting Notebook Server'"
          (click)="deleteResource(elem)"
        >
          <mat-icon>delete</mat-icon>
        </button>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>
</div>
